<template>
  <div>
    <div class="bg-light px-3 d-flex justify-content-between mt-3">
      <div class="flex-grow-1" style="vertical-align: middle;padding-top: 13px">新车投放报表</div>
      <div>
        <el-radio-group v-model="dayRadio1" class="mx-3 my-auto" style="padding-top: 6px;">
          <el-radio-button label="昨天"></el-radio-button>
          <el-radio-button label="最近7天"></el-radio-button>
          <el-radio-button label="最近30天"></el-radio-button>
        </el-radio-group>
        <el-date-picker
          class="mr-3"
          v-model="date"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary">导出<i class="el-icon-download el-icon--right"></i></el-button>
      </div>
    </div>
    <div class="mt-5 d-flex">
      <!--表格-->
      <div class="w-50 mr-5">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            style="width: 33.3%"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            style="width: 33.3%"
            >
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </div>
      <!--图表-->
      <div id="main" class="w-25" :style="{height: '300px'}"></div>
    </div>
    <div class="py-3 bg-light px-3 d-flex justify-content-between">
      <div class="flex-grow-1" style="vertical-align: middle;padding-top: 13px">新车投放报表</div>
      <div>
        <el-radio-group v-model="dayRadio2" class="mx-3 my-auto" style="padding-top: 6px;">
          <el-radio-button label="昨天"></el-radio-button>
          <el-radio-button label="最近7天"></el-radio-button>
          <el-radio-button label="最近30天"></el-radio-button>
        </el-radio-group>
        <el-date-picker
          class="mr-3"
          v-model="date"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary">导出<i class="el-icon-download el-icon--right"></i></el-button>
      </div>
    </div>
    <div class="mt-5 d-flex">
      <!--表格-->
      <div class="w-50 mr-5">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            style="width: 33.3%"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            style="width: 33.3%"
            >
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </div>
      <!--图表-->
      <div id="main2" class="w-25" :style="{height: '300px'}"></div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        dayRadio1: '昨天',
        dayRadio2: '昨天',
        date: '',
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    mounted () {
      var echarts = require('echarts');

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        // toolbox: {
        //   feature: {
        //     dataView: {readOnly: false},
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        legend: {
          data: ['展现','点击','访问','咨询','订单']
        },
        series: [
          {
            name: '预期',
            type: 'funnel',
            left: '10%',
            width: '80%',
            sort : 'ascending',     // 金字塔形:'ascending',  漏斗图形:'descending'
            label: {
              normal: {
                formatter: '{b}预期'
              },
              emphasis: {
                position:'inside',
                formatter: '{b}预期: {c}%'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                opacity: 0.7
              }
            },
            data: [
              {value: 60, name: '访问'},
              {value: 40, name: '咨询'},
              {value: 20, name: '订单'},
              {value: 80, name: '点击'},
              {value: 100, name: '展现'}
            ]
          },
          {
            name: '实际',
            type: 'funnel',
            left: '10%',
            width: '80%',
            maxSize: '80%',
            sort : 'ascending',     // 金字塔形:'ascending',  漏斗图形:'descending'
            label: {
              normal: {
                position: 'inside',
                formatter: '{c}%',
                textStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                position:'inside',
                formatter: '{b}实际: {c}%'
              }
            },
            itemStyle: {
              normal: {
                opacity: 0.5,
                borderColor: '#fff',
                borderWidth: 2
              }
            },
            data: [
              {value: 30, name: '访问'},
              {value: 10, name: '咨询'},
              {value: 5, name: '订单'},
              {value: 50, name: '点击'},
              {value: 80, name: '展现'}
            ]
          }
        ]
      });


      // 基于准备好的dom，初始化echarts实例
      var myChart2 = echarts.init(document.getElementById('main2'));
      // 绘制图表
      myChart2.setOption({
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        // toolbox: {
        //   feature: {
        //     dataView: {readOnly: false},
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        legend: {
          data: ['展现','点击','访问','咨询','订单']
        },
        series: [
          {
            name: '预期',
            type: 'funnel',
            left: '10%',
            width: '80%',
            sort : 'ascending',     // 金字塔形:'ascending',  漏斗图形:'descending'
            label: {
              normal: {
                formatter: '{b}预期'
              },
              emphasis: {
                position:'inside',
                formatter: '{b}预期: {c}%'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                opacity: 0.7
              }
            },
            data: [
              {value: 60, name: '访问'},
              {value: 40, name: '咨询'},
              {value: 20, name: '订单'},
              {value: 80, name: '点击'},
              {value: 100, name: '展现'}
            ]
          },
          {
            name: '实际',
            type: 'funnel',
            left: '10%',
            width: '80%',
            maxSize: '80%',
            sort : 'ascending',     // 金字塔形:'ascending',  漏斗图形:'descending'
            label: {
              normal: {
                position: 'inside',
                formatter: '{c}%',
                textStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                position:'inside',
                formatter: '{b}实际: {c}%'
              }
            },
            itemStyle: {
              normal: {
                opacity: 0.5,
                borderColor: '#fff',
                borderWidth: 2
              }
            },
            data: [
              {value: 30, name: '访问'},
              {value: 10, name: '咨询'},
              {value: 5, name: '订单'},
              {value: 50, name: '点击'},
              {value: 80, name: '展现'}
            ]
          }
        ]
      });
    }
  }
</script>

<style scoped>
  .bg-purple-light {
    background: #e5e9f2;
  }
</style>